<template>
    <div id="app" class="myLevel backf4" style="height: 100%;">
        <loading v-if="loading"></loading>
        <div v-else>
            <div>
                <div class="my_level center">
                    <div class="myhead_area relative">
                       <img :src="levels.user.head" class="myhead">
                       <img  class="vip-level absolute" v-if="levels.user.current_level" :src="levels.user.current_level.cover" />
                    </div>
                    <div class="level_line flex-between">
                        <div class="levle_name" v-if="levels.user.current_level && levels.user.next_level" v-text="levels.user.current_level.title"></div>
                        <!-- 顶级用户 -->
                        <div class="levle_name" v-if="levels.user.current_level && !levels.user.next_level" v-text="levels.levels[levels.levels.length-2][0].title"></div>
                        <!-- 无等级用户 -->
                        <div class="levle_name" v-if="!levels.user.current_level && levels.user.next_level">无等级</div>
                        <div class="level_process relative">
                            <div class="absolute procent" v-if="levels.user.next_level" :style="{'width':(levels.user.expend/levels.user.next_level.integral_start)*100+'%'}"></div>
                            <div class="absolute procent" v-else style="width:0"></div>
                        </div>
                        <div class="levle_name" v-if="levels.user.next_level" v-text="levels.user.next_level.title"></div>
                        <div class="levle_name" v-else v-text="levels.levels[levels.levels.length-1][0].title"></div>
                    </div>
                    <div class="nextlevel_distance" v-if="levels.user.next_level" v-text="'距离'+levels.user.next_level.title+'还差'+(levels.user.next_level.integral_start-levels.user.expend)"></div>
                    <div class="nextlevel_distance" v-else >恭喜您成为最高VIP</div>
                </div>
            </div>
            <div class="level_list">
                <div v-for="(item,index) in levels.levels">
                  <div class="accumulative" v-text="'累计消费：'+item[0].integral_start+'-'+item[item.length-1].integral_start"></div>
                  <div class="flex" style="justify-content: space-around;">
                      <div class="level_item center" v-for="(level,idx) in item">
                          <img :src="level.cover" :alt="'等级'+level.id" class="vip-level" :style="{'width':level.id>20?'1.5rem':'.83rem'}">
                          <p v-text="level.integral_start"></p>
                      </div>
                  </div>
                </div>
            </div>
            <div style="color: #808080;padding-bottom: .48rem;margin-top: -.2rem;" class="center">敬请期待</div>
        </div>
      </div>
    </div>
</template>
<script>
import './index.css';
import common from 'assets/js/common';
import Loading from "components/loading.vue"
export default {  
  data(){
    return {
        loading:true,
        levels:{},
        /*dengji: {
          "user": {
              "head": "http://pby7cluvp.bkt.clouddn.com/Fmks7b5SOn9ZmaZxhSf0WroV7lvX",
              "level_id": 3,
              "expend": 433.19,
              "current_level": {
                  "id": 3,
                  "title": "3",
                  "level_name": null,
                  "integral_start": 300,
                  "integral_end": 500,
                  "cover": "userlevel_icon_3.png",
                  "hash": "",
                  "level_permission": null,
                  "status": 1
              },
              "next_level": {
                  "id": 4,
                  "title": "4",
                  "level_name": null,
                  "integral_start": 500,
                  "integral_end": 900,
                  "cover": "userlevel_icon_3.png",
                  "hash": "",
                  "level_permission": null,
                  "status": 1
              }
          },
          "levels": [
              [
                  {
                      "id": 1,
                      "title": "1",
                      "level_name": null,
                      "integral_start": 10,
                      "integral_end": 100,
                      "cover": "userlevel_icon_1.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  },
                  {
                      "id": 2,
                      "title": "2",
                      "level_name": null,
                      "integral_start": 100,
                      "integral_end": 300,
                      "cover": "userlevel_icon_2.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  },
                  {
                      "id": 3,
                      "title": "3",
                      "level_name": null,
                      "integral_start": 300,
                      "integral_end": 500,
                      "cover": "userlevel_icon_3.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  },
                  {
                      "id": 4,
                      "title": "4",
                      "level_name": null,
                      "integral_start": 500,
                      "integral_end": 1000,
                      "cover": "userlevel_icon_4.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  }
              ],
              [
                  {
                      "id": 5,
                      "title": "5",
                      "level_name": null,
                      "integral_start": 1000,
                      "integral_end": 2000,
                      "cover": "userlevel_icon_5.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  },
                  {
                      "id": 6,
                      "title": "6",
                      "level_name": null,
                      "integral_start": 2000,
                      "integral_end": 5000,
                      "cover": "userlevel_icon_6.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  },
                  {
                      "id": 7,
                      "title": "7",
                      "level_name": null,
                      "integral_start": 5000,
                      "integral_end": 8000,
                      "cover": "userlevel_icon_7.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  },
                  {
                      "id": 8,
                      "title": "8",
                      "level_name": null,
                      "integral_start": 8000,
                      "integral_end": 10000,
                      "cover": "userlevel_icon_8.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  }
              ],
              [
                  {
                      "id": 9,
                      "title": "9",
                      "level_name": null,
                      "integral_start": 10000,
                      "integral_end": 15000,
                      "cover": "userlevel_icon_9.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  },
                  {
                      "id": 10,
                      "title": "10",
                      "level_name": null,
                      "integral_start": 15000,
                      "integral_end": 20000,
                      "cover": "userlevel_icon_10.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  },
                  {
                      "id": 11,
                      "title": "11",
                      "level_name": null,
                      "integral_start": 20000,
                      "integral_end": 25000,
                      "cover": "userlevel_icon_11.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  },
                  {
                      "id": 12,
                      "title": "12",
                      "level_name": null,
                      "integral_start": 25000,
                      "integral_end": 30000,
                      "cover": "userlevel_icon_12.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  }
              ],
              [
                  {
                      "id": 13,
                      "title": "13",
                      "level_name": null,
                      "integral_start": 30000,
                      "integral_end": 35000,
                      "cover": "userlevel_icon_13.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  },
                  {
                      "id": 14,
                      "title": "14",
                      "level_name": null,
                      "integral_start": 35000,
                      "integral_end": 40000,
                      "cover": "userlevel_icon_14.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  },
                  {
                      "id": 15,
                      "title": "15",
                      "level_name": null,
                      "integral_start": 45000,
                      "integral_end": 50000,
                      "cover": "userlevel_icon_15.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  }
              ],
              [
                  {
                      "id": 16,
                      "title": "16",
                      "level_name": null,
                      "integral_start": 55000,
                      "integral_end": 60000,
                      "cover": "userlevel_icon_16.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  },
                  {
                      "id": 17,
                      "title": "17",
                      "level_name": null,
                      "integral_start": 60000,
                      "integral_end": 65000,
                      "cover": "userlevel_icon_17.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  },
                  {
                      "id": 18,
                      "title": "18",
                      "level_name": null,
                      "integral_start": 65000,
                      "integral_end": 70000,
                      "cover": "userlevel_icon_18.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  }
              ],
              [
                  {
                      "id": 19,
                      "title": "19",
                      "level_name": null,
                      "integral_start": 70000,
                      "integral_end": 75000,
                      "cover": "userlevel_icon_19.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  },
                  {
                      "id": 20,
                      "title": "20",
                      "level_name": null,
                      "integral_start": 75000,
                      "integral_end": 80000,
                      "cover": "userlevel_icon_20.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  }
              ],
              [
                  {
                      "id": 21,
                      "title": "21",
                      "level_name": null,
                      "integral_start": 80000,
                      "integral_end": 100000,
                      "cover": "userlevel_icon_21.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  },
                  {
                      "id": 22,
                      "title": "22",
                      "level_name": null,
                      "integral_start": 100000,
                      "integral_end": 110000,
                      "cover": "userlevel_icon_22.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  }
              ],
              [
                  {
                      "id": 23,
                      "title": "23",
                      "level_name": null,
                      "integral_start": 120000,
                      "integral_end": 130000,
                      "cover": "userlevel_icon_23.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  },
                  {
                      "id": 24,
                      "title": "24",
                      "level_name": null,
                      "integral_start": 130000,
                      "integral_end": 140000,
                      "cover": "userlevel_icon_24.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  }
              ],
              [
                  {
                      "id": 25,
                      "title": "25",
                      "level_name": null,
                      "integral_start": 140000,
                      "integral_end": 150000,
                      "cover": "userlevel_icon_25.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  }
              ],
              [
                  {
                      "id": 26,
                      "title": "26",
                      "level_name": null,
                      "integral_start": 150000,
                      "integral_end": 160000,
                      "cover": "userlevel_icon_26.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  }
              ],
              [
                  {
                      "id": 27,
                      "title": "27",
                      "level_name": null,
                      "integral_start": 160000,
                      "integral_end": 170000,
                      "cover": "userlevel_icon_27.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  }
              ],
              [
                  {
                      "id": 28,
                      "title": "28",
                      "level_name": null,
                      "integral_start": 170000,
                      "integral_end": 180000,
                      "cover": "userlevel_icon_28.png",
                      "hash": "",
                      "level_permission": null,
                      "status": 1
                  }
              ]
          ]
        }*/
    }
  },
  components:{ Loading },
  mounted:function(){
      this.platform = common.platform;
      this.getLevels();
  },
  methods: {
      //获取在线用户列表
      getLevels:function(){
          common.ajax({
              type:'GET',
              url:'api/user/vip'
          }).then(res=>{
             this.loading = false;
             this.levels = res.data;
          })
      }
  }
} 
</script>

